<!-- 正文开始 -->
<div class="layui-fluid layui-form" id="bedPatient" lay-filter="bedPatient">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="toolbar" lay-filter="bedPatient-toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-label">科室</label>
                        <div class="layui-inline">
                            <select name="deptCode" lay-filter="bedPatient-deptCode" >
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn btnSearch"><i class="layui-icon layui-icon-search"></i>搜索</button>
                    </div>
                </div>
            </div>

            <div style="padding: 10px; background-color: #F2F2F2;" class="layui-unselect">
                <div id="bedPatient-list" class="layui-row layui-col-space15">
                </div>
            </div>

        </div>
    </div>

</div>

<style>
    #bedPatient-list .jzr-card-title{
        font-weight: 500;
        font-size:22px;
    }
    #bedPatient-list .jzr-card-row1{
        height: 35px;
        font-size:20px;
        font-weight:500;
    }
    #bedPatient-list .jzr-card-row2{
        height: 35px;
        font-size: 16px;
    }
    #bedPatient-list .jzr-card-box{
        border: 2px solid #f2f2f2;
        cursor: pointer;
    }
    #bedPatient-list .jzr-card-box:hover,
    #bedPatient-list .jzr-card-box:focus{
        border: 2px solid #FFB800;
    }
</style>
<script id="tpl-bedPatient-list" type="text/html">
    {{#  layui.each(d, function (index, item) { }}
    <div class="layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg">
        <div class="layui-card jzr-card-box" data-index="{{index}}">
            <div class="layui-card-header jzr-card-title" style="background-color:{{item.nurseLevelBgColor}};color:{{item.nurseLevelFontColor}}">
                {{item.bedName2 || item.bedName ||""}}
            </div>
            <div class="layui-card-body">
                <div class="jzr-card-row1">{{item.name||""}}</div>
                <div class="jzr-card-row1">{{item.code||""}}</div>
                <div class="jzr-card-row1">
                    {{#  if (item.doctorName) { }}
                    主治：{{item.doctorName||""}}
                    {{# } }}
                </div>
                <div class="jzr-card-row2">{{(item.inTime||"").substr(0,10)}}</div>
            </div>
        </div>
    </div>
    {{# }); }}
    {{#  if (d.length === 0) { }}
    无数据
    {{# } }}
</script>

<script>
    layui.use(['form', 'http', 'tools','laytpl'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var http = layui.http;
        var tools = layui.tools;
        var laytpl = layui.laytpl;

        var viewId = "#bedPatient";
        var $view = $(viewId);
        var $deptCode = $view.find("select[name='deptCode']");

        tools.select.deptCodeOptions($deptCode);
        form.render('select','bedPatient');

        var listData = [];

        // 显示表单弹窗
        var showEditModel = function showEditModel(data) {
            tools.param = {};
            tools.param.rowData = data;
            tools.param.deptCode = $deptCode.val();
            tools.open({
                title: '修改病人信息',
                url: http.viewPath + '/patient/bedPatientForm.html?v=' + http.viewVersion(),
                area: ['800px', '500px'],
                success: function (layero, index) {
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');  // 禁止出现滚动条
                },
                resize:true
            });
        };

        // 渲染列表
        var drawList = function(){
            var deptCode = $deptCode.val();
            http.get('patient/selectBedPatientVo',{deptCode:deptCode},function (res) {
                if(res.ok) {
                    listData = res.data;
                    var tpList = $("#tpl-bedPatient-list").html();
                    laytpl(tpList).render(res.data, function (htmlStr) {
                        $("#bedPatient-list").html(htmlStr);

                        $view.find(".jzr-card-box").click(function () {
                            if(listData && listData.length>0){
                                var index = $(this).data("index");
                                showEditModel(listData[index]);
                            }
                        });
                    });
                }else{
                    listData = [];
                }
            });
        };
        drawList();

        $view.find(".btnSearch").click(function () {
           drawList(deptCode.val());
        });

        form.on('select(bedPatient-deptCode)',function(data){
           drawList(data.value);
        });

    });
</script>